<template>
  <div>
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar
      title="精彩跟帖"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
    </van-nav-bar>
    <!-- 2.0 评论主体 -->
    <div class="list">
      <div
        class="item"
        v-for='item in commentList'
        :key='item.id'
      >
        <div class="head">
          <img
            :src="item.user.head_img | imgUrl"
            alt
          />
          <div>
            <p>{{item.user.nickname}}</p>
            <span>2021-6-10</span>
          </div>
          <span>回复</span>
        </div>
        <!-- 父评论 -->
        <MyContent v-if="item.parent" :comment="item.parent"></MyContent>
        <div class="text">{{item.content}}</div>
      </div>
    </div>
    <!-- 3.0 评论底部 -->
    <MyComment :article="post"></MyComment>
  </div>
</template>

<script>
import { getPostCommentByIdAPI, getPostDetailByIdAPI } from "../apis/news";
import MyComment from "../components/MyComment.vue";
import MyContent from "../components/MyContent.vue";

export default {
  components: {
    MyComment,
    MyContent,
  },
  data() {
    return {
      post: {},
      commentList: [],
    };
  },
  async created() {
    const id = this.$route.params.id;
    console.log(id);
    const res = await getPostDetailByIdAPI(id);
    // console.log(res);
    this.post = res.data.data;
    const res2 = await getPostCommentByIdAPI(id);
    // console.log(res2);
    this.commentList = res2.data.data;
  },
};
</script>

<style lang="less" scoped>
.item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > img {
      width: 50/360 * 100vw;
      height: 50/360 * 100vw;
      display: block;
      border-radius: 50%;
    }
    > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      > span {
        font-size: 12px;
        color: #999;
        line-height: 25px;
      }
    }
    > span {
      color: #999;
      font-size: 13px;
    }
  }
  .text {
    font-size: 14px;
    color: #333;
    padding: 20px 0 10px 0;
  }
}
</style>